<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
	</head>
	<body>
		<div class="page-container">
			<div id="container2" style="height: 380px;"></div>
		</div>
	</body>
		<script type="text/javascript" src="lib/echarts/echarts.js"></script>
		<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
			//var device = layui.device();
			var dom = document.getElementById("container2");
			var myChart = echarts.init(dom);
			// 显示标题，图例和空的坐标轴
	         myChart.setOption({
	             title: {
	                 text: '本月产品安装数量公示图'
	             },
	             tooltip: {trigger : 'axis'},
	             legend: {
	            	 show : true,
	                 data:['安装数量']
	             },
	             xAxis: {
	            	"type":"category",  
			        "axisLabel":{  
			            interval: 0  
			        }, 
	                 data: []
	             },
	             yAxis: {},
	             series: [{
	                 name: '安装数量',
	                 type: 'bar',
	                 data: [],
		             markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
	             }],
	            
	             calculable : true,
	             toolbox : {
						//显示策略，可选为：true（显示） | false（隐藏），默认值为false  
						show : true,
						//启用功能，目前支持feature，工具箱自定义功能回调处理  
						feature : {
							//辅助线标志  
							mark : {
								show : true
							},
							//数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
							dataView : {
								show : true,
								readOnly : true
							},
							//magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
							magicType : {
								show : true,
								type : [ 'line', 'bar' ]
							},
							//saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
							saveAsImage : {
								show : true
							}
						}
					},
	         });
			
			myChart.showLoading();
			
				var names=[];    //类别数组（实际用来盛放X轴坐标值）
		        var nums=[];    //销量数组（实际用来盛放Y坐标值）
		         
	         	$.ajax({
		         	type : "post",
		         	async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		         	url : "AccountAciton/getMonthViewCount.action",    //请求发送到TestServlet处
		         	data : {},
		         	dataType : "json",        //返回数据形式为json
		         	success : function(result) {
		             	//请求成功时执行该函数内容，result即为服务器返回的json对象
		             	if (result) {
		                    for(var i=0;i<result.length;i++){       
		                       names.push(result[i][1]);    //挨个取出类别并填入类别数组
		                     }
		                    for(var i=0;i<result.length;i++){       
		                        nums.push(result[i][0]);    //挨个取出销量并填入销量数组
		                      }
		                    myChart.hideLoading();    //隐藏加载动画
		                    
		                    myChart.setOption({        //加载数据图表
		                        xAxis: {
		                            data: names
		                        },
		                        series: [{
		                            // 根据名字对应到相应的系列
		                            name: '安装数量',
		                            data: nums
		                        }]
		                    });
		             	}
			        },
		         	error : function(errorMsg) {
		            //请求失败时执行该函数
		         	alert("图表请求数据失败!");
						myChart.hideLoading();
		         	}
		    	})
		</script>
</html>